<template>
  <div class="found-pay-page">
    <Back-top></Back-top>
    <Nav active-name="found-pay"/>
    <div class="breadcrumb-holder flex-row-v-center">
      <div class="item">首页</div>
      <img class="arrow" src="~assets/img/icon-right-arrow.png" />
      <div class="item active">我要卖号</div>
    </div>
    <div class="sec-01 flex-col-v-center">
      <div class="title-box flex-center">挂牌代售业务</div>
      <div class="tip-box">
        代收费为号价<span>5%</span>（最低200元）
      </div>
      <div class="deal-box">
        <img src="~assets/img/deal-bg.png">
        <div class="flex-row-v-center">
          <div class="item flex-center">上号截图</div>
          <div class="item flex-center">广告编辑</div>
          <div class="item flex-center">官网发布</div>
          <div class="item flex-center">寻找买家</div>
          <div class="item flex-center">担保交易</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="txt-item flex-row">
        <div class="li"></div>
        <div class="txt flex-1">买卖双方私下商量好了，联系客服帮助交易只需要号价的2%（最低200最高1000）交易手续费，费用谁出由买卖双方自行协商好</div>
      </div>
      <div class="txt-item flex-row">
        <div class="li"></div>
        <div class="txt flex-1">账号挂售登记后客服会上号截图，整理图片，编写详情，大概上架时间在3小时左右，高峰期可能要长一点，希望理解</div>
      </div>
      <div class="btn-group">
        <span class="btn flex-center">联系梓良代售</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.found-pay-page {
  background: rgb(245, 245, 245);

  .breadcrumb-holder {
    width: 1200px;
    height: 62px;
    margin: auto;
    .item {
      font-weight: 500;
      font-size: 16px;
      color: #A6ACB3;
      cursor: pointer;
      &.active {
        color: #3A3D41;
      }
    }
    .arrow {
      margin: 0 10px;
      width: 16px;
      height: 16px;
    }
  }

  .sec-01 {
    width: 1200px;
    background: #ffffff;
    margin: auto;
    padding: 0 250px 15px 250px;
    .title-box {
      width: 155px;
      height: 40px;
      font-weight: 600;
      font-size: 17px;
      color: #F58B01;
      background: url("~assets/img/title-bg.png") center center;
      background-size: cover;
    }
    .tip-box {
      margin-top: 36px;
      font-size: 14px;
      color: #7F8389;
      line-height: 20px;
      span {
        color: #F58B01;
      }
    }
    .deal-box {
      margin-top: 29px;
      width: 540px;
      font-size: 0;
      img {
        width: 100%;
        height: 60px;
        margin-bottom: 14px;
      }
      .item {
        width: 60px;
        margin-right: 60px;
        font-size: 14px;
        color: #3A3D41;
        line-height: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .line {
      width: 100%;
      height: 1px;
      background: #F2F2F2;
      margin: 37px 0 40px 0;
    }
    .txt-item {
      width: 622px;
      margin-bottom: 20px;
      .li {
        width: 12px;
        height: 12px;
        background: #FFD9A7;
        border-radius: 50%;
        margin-right: 10px;
        position: relative;
        top: 5px;
      }
      .txt {
        font-size: 14px;
        color: #3A3D41;
        line-height: 22px;
      }
    }
    .btn-group {
      padding: 60px 0;
      .btn {
        background: #F58B01;
        border-radius: 23px;
        font-size: 16px;
        height: 40px;
        color: #FFFFFF;
        padding: 9px 60px;
      }
    }
  }
}
</style>
